<template>
	<view>
		<!-- 评论 -->
		<view class="comment" id="comment">
			<view class="commentContent">
				<view class="cItem" v-for="comment in commentList" :key="comment._id">
					<view class="cItemTitle">
						<view class="avatar">
							<u-avatar :src="comment.userInfo?.avatar" size="60"></u-avatar>
							<text>{{comment.userInfo?.nickname}}</text>
						</view>
						<view class="score">
							<u-rate :count="5" disabled v-model="comment.score"></u-rate>
						</view>
					</view>
					<view class="attr">
						{{comment.attr}}
					</view>
					<view class="cItemContent">
						{{comment.content}}
					</view>
					<view class="cItemImageS" @click="toImage(comment.images)">
						<view class="cItemImage" v-for="(item,index) in comment.images" :key="index">
							<image :src="item" mode="heigthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<MyLoading v-model:lodingType="lodingType"/>
		<ZoomImage :imageSrcs="imageSrcs" v-model:flag="flag"></ZoomImage>
	</view>
</template>

<script setup>
	import {
		onLoad, onReachBottom, onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive
	} from 'vue'
	import { home,
	} from '@/api'
	import MyLoading from '@/components/MyLoading'
	import ZoomImage from '@/components/ZoomImage'
	let commentList = ref([])
	let commentParams = reactive({
		skip: '0',
		limit: 6,
		goods_id: ''
	})
	let lodingType = ref('more')
	let flag = ref(true)
	let imageSrcs = ref([])
	function toImage(images) {
		imageSrcs.value.length = 0
		flag.value = false
		imageSrcs.value.push(...images)
	}
	function getCommentList() {
		commentParams.skip = commentList.value.length
		lodingType.value = 'loading'
		home.reqComment(commentParams).then(res => {
			if (res.code === 1) {
				let list = commentList.value
				list.push(...res.data)
				list = list.map(item => {
					if (typeof item.images === 'string') {
						return {
							...item,
							images: item.images.split(',')
						}
					}
					return {
						...item,
					}
				})
				commentList.value = list
				if(commentList.value.length >= res.count) {
					lodingType.value = 'loaded'
				}else{
					lodingType.value = 'more'
				}
			}
		})
	}
	onReachBottom(() => {
		if(lodingType.value === 'more') {
			getCommentList()
		}
	})
	onPullDownRefresh(()=> {
		commentList.value = []
		commentParams.skip = '0'
		lodingType.value = 'more'
		getCommentList()
		uni.$u.toast('刷新成功')
		uni.stopPullDownRefresh();
	})
	onLoad((options) => {
		commentParams.goods_id = options.goods_id
		getCommentList()
	})
</script>

<style lang="scss" scoped>
	/* 评论 */
	.comment {
		padding: 15rpx;
		background-color: #fff;
		margin-bottom: 20rpx;

		.commentTitle {
			@include flex1(space-between, baseline);
			font-size: 30rpx;
			font-weight: 550;

			.commentMore {
				font-size: 20rpx;
				color: #888;
			}
		}

		.commentContent {
			margin: 15rpx 0;

			.cItem {
				margin: 15rpx 0;
				width: 100%;

				.cItemTitle {
					@include flex1(space-between);

					.avatar {
						display: flex;
						align-items: center;

						text {
							margin-left: 15rpx;
							font-size: 15rpx;
						}
					}
				}

				.attr {
					color: #ccc;
					font-size: 10rpx;
					margin: 12rpx 0;
				}

				.cItemContent {
					font-size: 20rpx;
					font-weight: 550;
				}

				.cItemImageS {
					width: 100%;
					display: flex;
					justify-content: space-between;
					margin: 15rpx 0;
					.cItemImage {
						width: 30%;
						margin: 0 5rpx;
						image {
							width: 100%;
							height: 160rpx;
							margin: 0 5rpx;
						}
						
						&:empty {
							display: none;
						}
					}	
				}
			}
		}
	}

	.more{
		text-align: center;
		font-size: 15rpx;
		color: #ccc;
	}
</style>
